<%--
  Created by IntelliJ IDEA.
  User: YLZX-Z0107
  Date: 2014/7/24
  Time: 14:05
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html><b></b>
<head>
    <script src="static/jquery-2.1.1.min.js" type="application/javascript"></script>
    <script src="static/bootstrap.min.js" type="application/javascript"></script>
    <link href="static/bootstrap.min.css" rel="stylesheet">
    <title>json</title>
</head>
<body onload="sendPage()">
<div class="jumbotron">
    <div class="container">
        <h1>欢迎登陆页面！</h1>

        <p>这是一个超大屏幕（Jumbotron）的实例。</p>

        <p><a class="btn btn-primary btn-lg" role="button">
            学习更多</a>
        </p>
    </div>
</div>
<div class="container">
    <h2> Json
        <small> just a jquery bootstrap test</small>
    </h2>
    <label>
        <input class="form-control" value="1" type="text">
    </label>
    <button type="button" class="btn btn-default" onclick="sendRequest()">see detail</button>
    <div class="col-lg-2">
        <div class="input-group">
            <input type="text" class="form-control" id="page">
               <span class="input-group-btn">
                  <button class="btn btn-default" type="button" onclick="sendPage()">
                      Go Page!
                  </button>
               </span>
        </div>
        <!-- /input-group -->
    </div>
    <!-- /.col-lg-6 -->
    <table class="table table-hover">
        <caption>上下文表格布局</caption>
        <thead>
        <tr>
            <th width="62%">title</th>
            <th width="10%">factory</th>
            <th width="8%">series</th>
            <th width="6%">fan</th>
            <th width="8%">url</th>
            <th width="6%">offerDate</th>
        </tr>
        </thead>
        <tbody id="item-list">
        <tr class="active">
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        </tbody>
    </table>
    <div id="title"></div>
    <img class="thumbnail" id="image" src="/img/1.jpg">
</div>
<script type="application/javascript">
    function sendRequest() {
        var id = $(".form-control").val();
        $.ajax({
            type: "get",
            url: "/arzon/basic?id=" + id,
            dataType: "json",
            success: function (data) {
                $("#title").text(data.title);
                $("#image").attr("src", data.cover);
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert(errorThrown);
            }
        });
    }

    function sendPage() {
        var page = $("#page").val();
        if (page == null||page=='') {
            page = 1;
        }
        $.ajax({
            type: "get",
            url: "/arzon/item-list?pageSize=20&page=" + page,
            dataType: "json",
            success: function (data) {
                var count = data.length;
                var tbd = $("#item-list");
                var ht="";
                for(var i=0;i<count;i++){
                    ht = ht + "<tr class=\"active\"><td>"+data[i].title+"</td><td>"+data[i].factory+"</td><td>"+data[i].series+"</td><td>"+data[i].fan+"</td><td>"+data[i].url+"</td><td>"+getTime(data[i].offerDate)+"</td>";
                }
                tbd.html(ht);
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert(errorThrown);
            }
        });
    }

    function getTime(/** timestamp=0 **/) {
        var ts = arguments[0] || 0;
        var t,y,m,d;
        t = ts ? new Date(ts) : new Date();
        y = t.getFullYear();
        m = t.getMonth()+1;
        d = t.getDate();
        // 可根据需要在这里定义时间格式
        return y+'-'+(m<10?'0'+m:m)+'-'+(d<10?'0'+d:d);
    }
</script>
</body>
</html>
